// 参考配置
// https://cli.vuejs.org/zh/config/#integrity
const webpack = require('webpack')
const path = require('path')
const dayjs = require('dayjs')
const TerserPlugin = require('terser-webpack-plugin')
// const webpackZipPlugin = require('webpack-zip-plugin') // 打包生成zip包
// const CompressionWebpackPlugin = require("compression-webpack-plugin");

// 适配不同屏幕
const autoprefixer = require('autoprefixer'); //根据浏览器适配css，自动加前缀，不用可以删除
const pxtorem = require('postcss-pxtorem');

const IS_PROD = process.env.NODE_ENV === 'production'
// 是否需要打包zip（暂时只支持mac）
// const IS_NEED_ZIP = false
// 是否需要保留历史zip版本
// const IS_NEED_ZIP_HISTORY = false
const resolve = _path => path.resolve(__dirname, _path)
const proxyReq = (proxyReq) => {
  const { sockets } = proxyReq.agent
  const keys = Object.keys(sockets)
  console.log(`当前请求代理到：${keys[0]}, ${sockets[keys[0]][0]._httpMessage.path}`)
}
const timestamp = dayjs().format('YYYYMMDDHHmmss')
const versionName = dayjs().format('MMDDHHmm')

// 开启微信 支付宝生活号的sdk
const alipaySdk = true
const wxSdk = true

module.exports = {
  // 根据环境变量部署应用包时的基本 URL,生产环境需要替换成打包的路径
  publicPath: './',

  outputDir: 'dist',

  assetsDir: 'static',

  filenameHashing: true, // 打包后文件后面会跟一个8位的hash值

  productionSourceMap: false, // 生产环境是否开启sourcemap

  lintOnSave: true, // eslint-loader 是否在保存的时候检查
  pluginOptions: {
    // 配置less 公共变量 mixin引入, 不用每个文件引入了
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/assets/less/functions.less'),
        path.resolve(__dirname, 'src/assets/less/variables.less')
      ]
    }
  },
  // cors 相关 https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors
  // corsUseCredentials: false,
  // webpack 配置，键值对象时会合并配置，为方法时会改写配置
  // https://cli.vuejs.org/guide/webpack.html#simple-configuration
  configureWebpack: (config) => ({
    // config: process.env.NODE_ENV === 'production' ? Object.assign(config, {
    //   name: name,
    //   externals: externals
    // }) : config,
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        '@': resolve('src'),
        'src': resolve('src')
      }
    },
    output: { // js输出重构【模块名称.时间戳】
      filename: `static/js/[name].${timestamp}.js`,
      chunkFilename: `static/js/[name].${timestamp}.js`
    },
    optimization: IS_PROD ? {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          test: /\.js(\?.*)?$/i, // 匹配要压缩的文件
          parallel: true, // 使用多进程并发运行以提高构建速度
          terserOptions: { // Terser压缩配置
            compress: {
              drop_debugger: true, // 打包时是否去掉debugger调试
              drop_console: false // 打包时是否去掉cosole.log打印
            }
          }
        })
      ]
    } : {}
  }),
  // webpack 链接 API，用于生成和修改 webapck 配置
  // https://github.com/mozilla-neutrino/webpack-chain
  chainWebpack: (config) => {
    config.plugins.delete("preload"); // TODO: need test
    config.plugins.delete("prefetch"); // TODO: need test
    config.plugin('html').tap(args => {
      args[0].wxSdk = wxSdk
      args[0].alipaySdk = alipaySdk
      return args
    })

    if (process.env.NODE_ENV === 'production') {
      config.plugin('html').tap(args => {
        args[0].cdn = cdn
        args[0].wxSdk = wxSdk
        args[0].alipaySdk = alipaySdk
        return args
      })
      // externals里的模块不打包
      config.externals(externals)

      config.plugin('html').tap(args => {
        args[0].minify.minifyCss = true
        return args
      })
      // 注入版本号时间戳
      config
        .plugin('html')
        .tap(args => {
          let defaultConfig = args[0]
          return [{
            ...defaultConfig,
            timestamp: timestamp
          }]
        })

      // gzip需要nginx进行配合
      // config
      //   .plugin("compression")
      //   .use(CompressionWebpackPlugin)
      //   .tap(() => [
      //     {
      //       test: /\.js$|\.html$|\.css/, // 匹配文件名
      //       threshold: 10240, // 超过10k进行压缩
      //       deleteOriginalAssets: false // 是否删除源文件
      //     }
      //   ]);
    }
    /**
     * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改
     */
    if (IS_PROD) {
      config
        .plugin('banner-plugin')
        .use(webpack.BannerPlugin, [{
          banner: `发布时间${dayjs().format('YYYY-MM-DD HH:mm:ss')}`,
          include: /app/
        }])
        .end()
      config
        .module
        .rule('images')
        .use('url-loader')
        .loader('url-loader')
        .tap(options => Object.assign(options, { limit: 20480 }))
        .end()
      // if (IS_NEED_ZIP && require('os').type() !== 'Windows_NT') {
      //   config
      //     .plugin('zip-plugin')
      //     .use(webpackZipPlugin, [ // 打包生成zip包
      //       {
      //         frontShell: IS_NEED_ZIP_HISTORY ? 'ls && pwd' : 'ls && pwd && cd ./buildHistory && rm -rf !.gitkeep *',
      //         initialFile: './dist/', // 需要打包的文件夹（一般位dist）
      //         endPath: './buildHistory', // 打包到对应目录
      //         zipName: `mycomponent-build-${versionName}.zip`, // 打包生成的文件名
      //         // behindShell: `mv h5-build-${versionName}.zip ./buildHistory`
      //       }
      //     ])
      // }

    }

    // 设置 svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
    // set preserveWhitespace
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true;
        return options;
      })
      .end();

    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === "development", config =>
        config.devtool("cheap-source-map")
      );
    config.when(process.env.NODE_ENV !== "development", config => {
      config
        .plugin("ScriptExtHtmlWebpackPlugin")
        .after("html")
        .use("script-ext-html-webpack-plugin", [
          {
            // `runtime` must same as runtimeChunk name. default is `runtime`
            inline: /runtime\..*\.js$/
          }
        ])
        .end();
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true
          },
          libs: {
            name: 'chunk-libs',
            chunks: 'initial', // only package third parties that are initially dependent
            test: /[\\/]node_modules[\\/]/,
            priority: 10
          }
        }
      })
      config.optimization.runtimeChunk('single')
    });
  },
  css: {
    extract: { //css输出重构【模块名称.时间戳】
      filename: `static/css/[name].${timestamp}.css`,
      chunkFilename: `static/css/[name].${timestamp}.css`,
    },
    // 开启 CSS source maps? todo: 是否影响HMR
    sourceMap: false,
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
              rootValue: 37.5,  //手机设计稿宽度为375px的
              propList: ['*'], //属性的选择器，*表示通用
              exclude: /web/i, //忽略web下的所有文件
              selectorBlackList: ['.a-'] // 过滤掉.a- 开头的class，不进行rem转换
          }),
        ]
      }
    }
  },
  // All options for webpack-dev-server are supported
  // https://webpack.js.org/configuration/dev-server/
  devServer: {
    open: false,

    host: '0.0.0.0',

    port: 8088,

    disableHostCheck: true,

    proxy: {
      '/ihp-gateway': {
        target: 'https://yb.ylzpay.com',
        changeOrigin: true,
        // pathRewrite: {
        //   '^/': '/'
        // },
        onProxyReq: proxyReq
      }
    }
  },
  // 构建时开启多进程处理 babel 编译
  parallel: require('os').cpus().length > 1
}
